<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #id{
            width: 100%;
        }
        #left{
            width:40%;
            height:400px;
            float:left;
            /* background-color: #d5d2d23b; */
            position: fixed;

        }
        #left #login{
            margin-left:25%;
            margin-top: 180px;
        }
        #left input{
            padding-left: 5px;
            width:250px;
            height:35px;
            border-radius: 10px;
            outline:none;
        }
        #left p{
            font-size: 20px;
        }
        #left  #submit{
            margin-top: 20px;
            width:260px;
            height: 40px;
            background-color: rgb(226, 148, 52);
            color: white;
            font-size: 20px;
            border:3px solid rgb(226, 148, 52);
            border-radius: 10px;
        }
        #right{
            width:60%;
            height:3000px;
            float:right;
            background-color: #d5d2d23b;
        }
        #right #one{
            height:480px;
            width:100%;
            background-color: #F3F1E7;
            /* background-color: red; */
        }
        #right #one img{
            width:250px;
            margin-left: 40px;
            margin-top:80px;
        }

    </style>
</head>
<body>
    <div id="main">
        <div id="left">
            <!-- <p style="margin:0 auto;">登录</p> -->
            <form action="" id="login">
                <h1 style="margin-left:100px;">登录</h1>
                <p>手机号码：</p><input type="num" oninput="value=value.replace(/[^\d]/g,'')" id="phone">
                <p>密码：</p><input type="password"  id="password"><br>

                <button id="submit">登录</button>
            </form>
        </div>
        <div id="right">
            <div id="one" style="float:left;">
                <img src="../images/dog.jpg" alt="" >
                <img src="../images/dog.jpg" alt="">
                <img src="../images/dog.jpg" alt="">
            </div>
            <img src="../images/2.jpg" alt="" >
            <img src="../images/dog.jpg" alt="">
            <img src="../images/2.jpg" alt="">
            <img src="../images/dog.jpg" alt="">
        </div>
    </div>
</body>
<script>
    var pageHeight;
    var locate=0;
    window.onload=function(){
        pageHeight=document.body.scrollHeight;
    }
    var timer;
    timer=setInterval("scrollDown()",40); 
    function scrollDown(){
        if(locate<pageHeight){
            locate++;
            scroll(0,locate);
        }else{
            clearInterval(timer);
        }
    }


    var submit = document.getElementById('submit');
    var phone = document.getElementById('phone');
    var password = document.getElementById('password');
    function isPhone(pone) {
        var myreg = /^1[0-9]{10}$/;
        if(!myreg.test(pone)) {
            return false;
        }else{
            return true;
        }
  }
    submit.addEventListener('click',function(){
        if(phone.value ==''||password.value == ''){
            alert('输入框不能为空！！');
        }else{
            let flag = isPhone(phone.value);
            if(!flag){ 
                alert("请填写11位手机号码！！");  
            }else{
                alert('登录成功！！')
            }
        }
    })

    submit.onclick = function () {
            var xhr = new XMLHttpRequest();
            var data = "phone=" + username.value + "&password=" + password.value;
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4) {
                    if(xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        var res = xhr.responseText;
                        console.log(res);
                        judge(res);
                    } else {
                        alert("request is error!!" + xhr.status);
                    }
                }
            }
            xhr.open('post','http://localhost:8080/user/login',true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            xhr.send(data);
        }
        function judge(a) {
            if (a == "true") {
                alert("登陆成功！正在跳转。。。");
                window.location.href = "www.baidu.com";
            } else {
                alert("登陆失败！！！");
            }
        }
    


    
</script>
</html>